<template>
	<el-card shadow="hover">
		<el-form v-if="showSearch" ref="queryFormRef" :model="queryParams" inline>
			<el-form-item label="字典名称" prop="dictionaries_config_id">
				<el-select
					v-model="queryParams.dictionaries_config_id"
					placeholder="请选择字典"
					filterable
					remote
					:remote-method="dictionaryIdRemoteMethod"
					@change="onChangeDict"
					class="w100"
				>
					<el-option v-for="item in dictionariesIdSelect.options" :key="item.id" :label="item.name" :value="item.id + ''" />
				</el-select>
			</el-form-item>
			<el-form-item label="字典标签" prop="name">
				<el-input v-model="queryParams.name" placeholder="请输入字典标签" />
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="queryParams.status">
					<el-option label="全部" :value="0" />
					<el-option label="正常" :value="2" />
					<el-option label="禁用" :value="1" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block">
			<el-col :span="1.5">
				<el-button @click="onOperation({ type: 'add', title: '新增字典数据' }, {})" type="primary" plain icon="el-icon-plus"> 添加 </el-button>
			</el-col>
      <!-- <el-col :span="1.5">
				<el-button @click="onExport()" type="warning" plain icon="el-icon-download"> 导出 </el-button>
			</el-col> -->
      <!-- <el-col :span="1.5">
				<el-button @click="onOperation({ type: 'clear', title: '清理缓存' }, {})" type="danger" plain icon="el-icon-refresh"> 清理缓存 </el-button>
			</el-col> -->
			<RightToolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading" size="small">
			<el-table-column prop="id" label="ID" align="center" />
			<el-table-column prop="name" label="字典标签" align="center" />
			<!-- <el-table-column prop="type" label="字典类型" align="center" /> -->
      <el-table-column prop="display_order" label="字典排序" align="center" />
			<el-table-column prop="status" label="状态" align="center" :formatter="formatterStatus" />
      <el-table-column prop="remarks" label="备注" align="center" />
			<el-table-column prop="create_time" label="创建时间" align="center" :formatter="formatterCreateTime" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
          <el-button @click="onOperation({ type: 'edit', title: '编辑字典数据' }, row)" type="text" plain icon="el-icon-edit"> 修改 </el-button>
          <el-button @click="onDelete(row)" type="text" plain icon="el-icon-delete"> 删除 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<PaginationComponent
			v-show="total > queryParams.pageSize"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<DictDataOperationDialog ref="dictDataOperationDialogRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { dictionariesApi } from '/@/api/admin/index';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import DictDataOperationDialog from './dialog/dictDataOperationDialog.vue';

const DictionariesApi = dictionariesApi();
export default {
	name: 'systemDictData',
	components: { DictDataOperationDialog },
	setup() {
		const queryFormRef = ref(null);
		const dictDataOperationDialogRef = ref(null);
    const route = useRoute();
		const state = reactive({
			showSearch: true,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: '',
				dictionaries_config_id: '',
				status: 0,
				type: '',
			},
			tableList: [],
			dictionariesIdSelect: {
				options: [] as any,
				loading: false,
			},
			loading: false,
			total: 0,
		});
		//生命周期
		onMounted(() => {
			state.queryParams.dictionaries_config_id = route.query.id + '';
			state.queryParams.type = route.query.type + '';
			dictionariesConfigList({ pageNum: 1, pageSize: 1000 });
			getList();
		});
		/********** 点击事件 **********/
		// 选择字典
		const onChangeDict = (value: any) => {
			console.log(value)
			_dictionariesConfigSelect({
				dictionaries_config_id: value,
			})
		};
		// 选择字典查询
		const dictionaryIdRemoteMethod = (query: any) => {
			if (query) {
				state.loading = true;
				_dictionariesList({
					...state.queryParams,
					dictionaries_config_id: query,
				});
			}
		};
		// 查询
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置查询
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			state.queryParams.dictionaries_config_id = route.query.id + '';
			state.queryParams.type = route.query.type + '';
			onQuery();
		};
		// 添加/编辑字典内容
		const onOperation = (data: any, row: any) => {
			(dictDataOperationDialogRef.value as any)?.openDialog(data, {
				...row,
				type: state.queryParams.type,
				dictionaries_config_id: Number(state.queryParams.dictionaries_config_id)
			}, () => getList());
		};
    // 删除字典内容
    const onDelete = (row: any) => {
			ElMessageBox.confirm('您确定要删除此条标签?', '确认消息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				_dictionariesDelete({
					dictionaries_id: row.id
				});
			});
			
    };
    // 导出
    const onExport = () => {};
		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_dictionariesList(state.queryParams);
		};
		// 创建时间
		const formatterCreateTime = (row: any) => {
			return timeDictionary(row.create_time);
		};
    // 状态
    const formatterStatus = (row: any) => {
      switch (Number(row.status)) {
        case 1:
          return '正常';
        case 0:
          return '禁用';
        default:
          return '';
      }
    };

		/********** 网络事件 **********/
		// 字典列表
		const dictionariesConfigList = (params: object) => {
			DictionariesApi.dictionariesConfigList(params)
				.then((res: any) => {
					state.dictionariesIdSelect.options = res.data.list;
				})
				.catch(() => {});
		};
		// 查看字典
		const _dictionariesConfigSelect = (params: object) => {
			DictionariesApi.dictionariesConfigSelect(params)
				.then((res: any) => {
					state.queryParams.type = res.data.info.type
				})
				.catch(() => {});
		};
		// 字典内容列表
		const _dictionariesList = (params: object) => {
			DictionariesApi.dictionariesList(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => (state.loading = false));
		};
		// 删除字典内容
		const _dictionariesDelete = (params: object) => {
			DictionariesApi.dictionariesDelete(params)
				.then(() => {
					ElMessage.success('操作成功！');
					getList();
				})
				.catch((err) => {
					ElMessage.error(err)
				});
		};
		return {
			queryFormRef,
			dictDataOperationDialogRef,
			onQuery,
      onExport,
			onResetQuery,
			onOperation,
      onDelete,
			onChangeDict,
			getList,
			formatterCreateTime,
      formatterStatus,
			dictionaryIdRemoteMethod,
			dictionariesConfigList,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
